<template>
	<view class="class-rank-page">
		<view class="average-info">
			<view class="average-item top">
				<view class="num">
					{{ average.highestScore ? average.highestScore : "-" }}
				</view>
				<view class="desc"> 最高分 </view>
			</view>
			<view class="average-item average">
				<view class="num">
					{{ average.averageScore ? average.averageScore : "-" }}
				</view>
				<view class="desc"> 平均分 </view>
			</view>
			<view class="average-item low">
				<view class="num">
					{{ average.lowestScore ? average.lowestScore : "-" }}
				</view>
				<view class="desc"> 最低分 </view>
			</view>
		</view>
		<view class="entry-item">
			<view class="title">排名</view>
			<view class="title">姓名</view>
			<view class="title">班级</view>
			<view class="title">分数</view>
		</view>
		<u-list @scrolltolower="scrolltolower" :height="'calc(100% - 112rpx)'"
			style="position: relative">
			<view class="teacher-loading" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view class="entry-list">
				<view class="entry-item"
					v-for="(itemStudent, index) in tableList"
					:key="itemStudent.studentName">
					<view :class="['entry-remark', `rank-${itemStudent.gradeRank}`]">
						<!-- {{ itemStudent.gradeRank }} -->
						{{itemStudent.gradeRank == 1 || itemStudent.gradeRank == 2 ? '' : itemStudent.gradeRank}}
					</view>
					<view class="student-name">
						<view style="width: 100%; text-align: center">
							{{ itemStudent.studentName }}
						</view>
					</view>
					<view class="student-name">
						<view style="width: 100%; text-align: center">
							{{ itemStudent.className }}
						</view>
					</view>
					<view class="entry-box">
						<view class="entry-num"
							style="width: 100%; text-align: center">
							{{ itemStudent.result }}
						</view>
					</view>

				</view>
			</view>
		</u-list>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		gradePreviewPage,
		gradeAverage,
	} from "@/pages/achievement/api/teacher.js"
	export default {
		data() {
			return {
				loading: true,
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tableList: [],
				average: {},
			}
		},
		onLoad(options) {
			if (options?.examId) {
				this.examId = options.examId
				this.getList()
				this.getAverage()
			}
		},
		methods: {
			async getList() {
				const params = {
					examId: this.examId,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					rank: true,
				}
				try {
					const resp = await gradePreviewPage(params)
					if (this.pageNo == 1) {
						this.tableList = []
					}
					this.loading = false
					const { data: respData } = resp

					if (respData?.list) {
						for (const item of respData?.list) {
							this.tableList.push(item)
						}
					}

					this.total = respData?.total
					this.loading = false
				} catch (e) {
					console.log(e)
					//TODO handle the exception
					this.loading = false
				}
			},
			scrolltolower() {
				console.log(1)
				this.pageNo += 1
				const page = Math.ceil(this.total / this.pageSize)
				if (this.pageNo > page) {
					if (!this.showNoMore) {
						this.showNoMore = true
						return this.$refs.uToast.show({ message: "没有更多成绩了" })
					}
				} else {
					this.getList()
				}
			},
			async getAverage() {
				const { data } = await gradeAverage(this.examId)
				console.log(data)
				this.average = data
			},
		},
	}
</script>

<style lang="scss" scoped>
	.class-rank-page {
		box-sizing: border-box;
		height: 100vh;
		padding: 20rpx 30rpx;
		background: #f2f4f9;
		overflow-y: scroll;
	}

	.average-info {
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.average-item {
			height: 200rpx;
			text-align: center;
		}

		.num {
			font-size: 54rpx;
			color: #333;
			height: 140rpx;
			line-height: 140rpx;
		}

		.desc {
			font-size: 26rpx;
			color: #d7d8d9;
		}

		.top {
			.num {
				color: #00c73d;
			}
		}

		.average {
			.num {
				color: #4174fd;
			}
		}

		.low {
			.num {
				color: #ff8948;
			}
		}
	}

	.entry-list {
		background: #ffffff;
		border-radius: 16rpx;
	}

	.entry-item {
		width: 100%;
		height: 112rpx;
		display: flex;
		justify-content: flex-start;
		background: #ffffff;

		border-radius: 16rpx 16rpx 0 0;

		.student-name,
		.entry-box,
		.entry-remark,
		.title {
			width: 172rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10rpx;
		}

		.title {
			font-weight: 600;
		}
	}
	.rank-1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		&:before {
			display: block;
			content: ' ';
			width: 48rpx;
			height: 48rpx;
			background: url('@/pages/achievement/static/img/first.png') 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}
	
	.rank-2 {
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		&:before {
			display: block;
			content: ' ';
			width: 48rpx;
			height: 48rpx;
			background: url('@/pages/achievement/static/img/secend.png') 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
